<!--  -->
<template>
  <div class='statistics-page'>
    <van-sticky>
      <c-title text="业绩统计" :hide="false"></c-title>
      <van-search v-model="keyword" placeholder="请输入搜索关键词" shape="round"  @input="onSearchChange" />
      <div class="statistics-board flex">
        <div class="board-item">
          <h3>今日业绩</h3>
          <p>{{info.today || '---'}}</p>
        </div>
        <div class="board-item">
          <h3>昨日业绩</h3>
          <p>{{info.yesterday || '---'}}</p>
        </div>
        <div class="board-item">
          <h3>总业绩</h3>
          <p>{{info.total || '---'}}</p>
        </div>
      </div>
    </van-sticky>
    <div class="statistics">
      <h3 class="title">粉丝：{{info.fans_count}}人</h3>
      <div class="statistics-list" v-if="fansList.length > 0">
        <block v-for="(item,index) in fansList" :key="index">
          <div class="statistics-item flex">
            <div class="image">
              <img :src="item.avatar" />
            </div>
            <div class="wrap flex-j-sb">
              <div class="user">
                <h4>{{item.nickname}}</h4>
                <p>手机号：{{item.mobile}}</p>
                <p>加入时间：{{item.createtime}}</p>
              </div>
              <div class="right flex">
                <p>{{item.child_count}}人</p>
                <p>￥{{item.performance || '---'}}</p>
              </div>
            </div>
          </div>
        </block>

      </div>
      <van-empty description="暂无数据"  v-else/>
      <div class="mb-50"></div>
    </div>
  </div>
</template>

<script>
  import statistics_controller from "./statistics_controller.js";
  export default statistics_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .mb-50 {
    height: 3.125rem;
    clear: both;
  }
  .statistics-board {
    background-color: #fff;
    padding:0.75rem 0 1rem 0;
    .board-item {
      flex:0 0 33.3%;
      h3 {
        font-size: 0.75rem;
        font-weight: 400;
        color: #AAAAB3;
        padding:0 0 0.375rem 0;
      }
      p {
        color: #3B3B4A;
        font-size: 0.875rem;
        font-weight: 400;
      }
    }
  }
  .statistics {
    margin:0.75rem;
    .title {
      font-size: 0.875rem;
      color: #333333;
      margin: 0 0 0.75rem 0;
      text-align: left;
      font-weight: 400;
    }
    .statistics-list {
      .statistics-item {
        border-radius: 0.75rem;
        padding:0.75rem;
        background-color: #fff;
        margin: 0 0 0.75rem 0;
        .image {
          img {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            display: block;
          }
          padding: 0 0.75rem 0 0;
        }
        .wrap {
          flex:1;
          .user {
            text-align: left;
            h4 {
              font-weight: 400;
              color: #333333;
              padding: 0 0 0.25rem 0;
              font-size: 0.875rem;
            }
            p {
              font-weight: 400;
              color: #AAAAB3;
              padding:0 0 0.25rem 0;
              font-size: 0.75rem;
              &:last-child {
                padding:0;
              }
            }
          }
          .right {
            flex-direction: column;
            justify-content: flex-end;
            color:#FE5E56;
            font-size: 0.75rem;
            p{
              &:last-child {
                padding:0.25rem 0 0 0;
              }
            }
          }
        }
      }
    }
  }
</style>